<template>
  <div class="usermanager_box">
    <div class="usermanager_box_title">
       <el-button type="primary" @click="getAll()">所有文章</el-button>
       <el-button type="primary" @click="getSome()">待审核文章</el-button>
       
    </div>
    <!-- <div class="search_content">
      <div class="num">文章编号</div>
      <el-input v-model="userid" placeholder="请输入文章编号"></el-input>
      <div class="num">文章名称</div>
      <el-input v-model="username" placeholder="请输入文章名称"></el-input>
      <div class="num">创建时间</div>
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </div> -->
    <!-- <div class="button_box">
      <el-button type="primary" icon="el-icon-edit"  @click="toPage('NewArticle')">新建文章</el-button>
      <el-button type="primary" icon="el-icon-search" class="search_button">搜索</el-button>
      <el-button>重置</el-button>
    </div> -->
    <div class="table_box">
       <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="文章编号"
          width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.articleId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="文章标题"
          width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time" style="cursor: pointer;"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="预览"
          width="80">
          <template slot-scope="scope">
            <i class="el-icon-view" style="margin-left: 10px; cursor: pointer;" @click="toPage(scope.row.articleId)"></i>
          </template>
        </el-table-column>
         <el-table-column
          label="文章状态"
          width="150">
          <template slot-scope="scope">
             <div type="primary" v-if="scope.row.status=='approved'">已通过</div>
             <div type="primary" v-if="scope.row.status=='pending'">待审核</div>
             <div type="primary" v-if="scope.row.status=='rejected'">不通过</div>
             <div type="primary" v-if="!scope.row.status">待审核</div>
          </template>
        </el-table-column>
         <!-- <el-table-column
          label="预览"
          width="80">
          <template slot-scope="scope">
            <i class="el-icon-delete" style="margin-left: 10px;cursor: pointer;"></i>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="toPage('MotifyArticle')">审核通过</el-button>
          </template>
        </el-table-column> -->
      </el-table>
        <!-- <div class="block2">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="100">
        </el-pagination>
      </div> -->
    </div>
  </div>  
</template>

<script>
import {getAllArticle,getPendingArticle} from '@/api/api'
export default {
  data(){
    return{
      userid:'',
      tableData: [ ],
      flag:1
    }
  },
  mounted(){
     getAllArticle().then((response) => {
      console.log(11)
      console.log(response)
         this.tableData=response.data
      })
  },
  created(){
    getAllArticle().then((response) => {
      console.log(11)
      console.log(response)
         this.tableData=response.data
      })
  },
  methods:{
    toPage(key){
      // console.log(key)
      // localStorage.setItem('userid',key)
      localStorage.setItem('articleId',key)
      localStorage.setItem('to','Article')
      console.log('aeticleId11',key)
      this.$router.push({
        name:'ArticleDetail',
         params:{
          to:'Article',
          aeticleId:key
        }
      })
    },
    getAll(){
      getAllArticle().then((response) => {
      console.log(response)
         this.tableData=response.data
      })
    },
    getSome(){
      getPendingArticle().then((response) => {
      console.log('getPendingArticle',response)
         this.tableData=response.data
      })
    }
  }
}
</script>

<style>
.block2{
  margin-top: 2vw;
}
.table_box{
  margin: 0 auto;
  height: 65vh;
  overflow-y: scroll;
  
}
.el-pagination{
  margin-left: 35vw!important;
}
.search_content{
  margin-top: 3vh;
}
.el-button{
  margin-right: 2vw!important;
}
.button_box{
  margin-top: 3vh;
}
.num{
  width: 7vw;
}
.block{

  margin-left: 2vw;
}
.el-color-picker__icon, .el-input, .el-textarea {
  width: 47%!important;
}
.el-input__inner{
  width: 65%!important;
}
.el-date-editor--daterange{
  width: 100%!important;
}
.search_content{
  display: flex;
  align-items: center;
  text-align: center;
}
.usermanager_box{
  height: 75vh;
}
.usermanager_box_title{
  color: #000;
}
</style>